{include file='fcworker/fc_head'}
<link rel="stylesheet" href="{$_G['URL']['FCWORK_CSS']}dist/mescroll.min.css">

<style type="text/css">
    .mescroll-totop {
        bottom: 60px;
    }
    .mescroll-upwarp {
        padding:20px 0px 60px 0px;
    }

    .news-list {
        padding-bottom: 60px;
    }
    .telBtn {
        float: right;
        display: block;
        background: url({$_G['URL']['FCWORK_CSS']}images/edit.png) center no-repeat;
        width: .54rem;
        height: .54rem;
        background-size: 100% auto;
    }
</style>

<div id="mescroll" class="mescroll">
{include file='fcworker/fc_headsearch'}
    <a href="/{php echo createMobileUrl('w_wechatgroup_add',array("themeid"=>$themeid));}" class="homeTag" style="bottom: 2.2rem;"><img src="{$_G['URL']['FCWORK_CSS']}images/plus.png"></a>
    <div class="container">
    	<div class="numPeople">
        	<ul>
            	<li id="groupsnumall" ><p>全部</p><span>{$result['info']['groupsnumall']}</span></li>
                <li id="groupsnum"><p>满群</p><span>{$result['info']['groupsnum']}</span></li>
                <li id="groupsnumtuanyuan"><p>未满</p><span>{$result['info']['groupsnumtuanyuan']}</span></li>
            </ul>
        </div>
    </div>

        <ul id="newsList" class="news-list">
    {loop $result['list'] $item}
    <div class="teamBar">
    	<div class="teamTit">
        	<p>{$item['sid']}-{$item['name']}</p>
            <!-- <span>4人</span> -->
        </div>
        <div class="peopleInfor">
        	<div class="peopleImg">
                {if !empty($item['img'])}
            	<img src="{$item['img']}">
                {/if}
            </div>
            <div class="peopleTxt">
            	<h2>群主：{$item['workername']}</h2>
                <p>更新时间：{$item['addtime']}</p>
            </div>
            <div class="teamNum">人数:{$item['count']}人</div>
            <a href="{$item['url']}" class="telBtn"></a>
        </div>
        <dl>
        </dl>
    </div>  
    {/loop}
        </ul>
</div>
</body>
    <script src="{$_G['URL']['FCWORK_CSS']}dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
    <!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script> -->
    <script type="text/javascript" charset="utf-8">
        $("#groupsnumall").click(function () {
            window.location.href='{php echo "/".createMobileUrl('w_wechatgroup',array("themeid"=>$themeid,"status"=>0,"op"=>$op));}';
        });
        $("#groupsnum").click(function () {
            window.location.href='{php echo "/".createMobileUrl('w_wechatgroup',array("themeid"=>$themeid,"status"=>1,"op"=>$op));}';
        });
        $("#groupsnumtuanyuan").click(function () {
            window.location.href='{php echo "/".createMobileUrl('w_wechatgroup',array("themeid"=>$themeid,"status"=>2,"op"=>$op));}';
        });

        $(function(){
            //创建MeScroll对象
            var mescroll = new MeScroll("mescroll", {
                down: {
                    auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
                    callback: downCallback //下拉刷新的回调
                },
                up: {
                    auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                    toTop:{ //配置回到顶部按钮
                        src : "{$_G['URL']['FCWORK_CSS']}images/backtop.png", //默认滚动到1000px显示,可配置offset修改
                        //offset : 1000
                    }
                }
            });

            /*下拉刷新的回调 */
            function downCallback(){
                location.reload() ;
                //联网加载数据
                // getListDataFromNet(0, 1, function(data){
                //  //联网成功的回调,隐藏下拉刷新的状态
                //  mescroll.endSuccess();
                //  //设置列表数据
                //  setListData(data, false);
                // }, function(){
                //  //联网失败的回调,隐藏下拉刷新的状态
       //              mescroll.endErr();
                // });
            }

                    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
        function upCallback(page) {
            var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
            var pageSize = page.size; // 页长, 默认每页10条
            $.ajax({
                type: 'GET',
                dataType : "json",
                url: '{php echo "/".createMobileUrl('w_wechatgroup',array("themeid"=>$themeid,"status"=>$_P['status'],"show"=>"get","op"=>$op));}&page=' + pageNum + "&pageSize=" + pageSize,
                success: function(data) {
                    data = data.message;
                    var curPageData = data.list; // 接口返回的当前页数据列表
                    var totalPage = data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
                    var totalSize = data.totalSize; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
                    var hasNext = data.hasNext; // 接口返回的是否有下一页 (true/false)
                    // console.log("totalPage="+totalPage+", totalSize="+totalSize+", hasNext="+hasNext);
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
                    //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)

                    //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                    //必传参数(当前页的数据个数, 总页数)
                    //mescroll.endByPage(curPageData.length, totalPage);

                    //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    //必传参数(当前页的数据个数, 总数据量)
                    //mescroll.endBySize(curPageData.length, totalSize);

                    //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                    //必传参数(当前页的数据个数, 是否有下一页true/false)
                    mescroll.endSuccess(curPageData.length, hasNext);

                    //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                    //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                    //如果传了hasNext,则翻到第二页即可显示无更多数据.
                    //mescroll.endSuccess(curPageData.length);

                    //curPageData.length必传的原因:
                    // 1. 使配置的noMoreSize 和 empty生效
                    // 2. 判断是否有下一页的首要依据:
                    //    当传的值小于page.size时(说明不满页了),则一定会认为无更多数据;
                    //    比传入的totalPage, totalSize, hasNext具有更高的判断优先级;
                    // 3. 当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页
                    // 传totalPage, totalSize, hasNext目的是避免方法四描述的小问题

                    //设置列表数据
                    //setListData(curPageData);//自行实现 TODO

                    setListData(curPageData, true);
                },
                error: function(e) {
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态
                    mescroll.endErr();
                }
            });
        }

            /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
            function upCallbackold(page){
                //联网加载数据
                getListDataFromNet(page.num, page.size, function(curPageData){
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                    console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);

                    //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                    //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

                    //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

                    //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                    //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

                    //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
                    mescroll.endSuccess(curPageData.length);

                    //提示:curPageData.length必传的原因:
                    // 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
                    // 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
                    // 3.使配置的noMoreSize生效

                    //设置列表数据
                    setListData(curPageData, true);
                }, function(){
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr();
                });
            }

            /*设置列表数据*/
            function setListData(curPageData, isAppend) {
                var listDom=document.getElementById("newsList");
                for (var i = 0; i < curPageData.length; i++) {
                    var newObj=curPageData[i];

                    // var str='<p>'+newObj.title+'</p>';
                    // str+='<p class="new-content">"+newObj.content+"</p>';

                    var str ="    <div class=\'teamBar\'>";
                        str+="      <div class=\'teamTit\'>";
                        str+="          <p>"+newObj.id+"-"+newObj.name+"</p>";
                        // str+="            <span>4人</span>";
                        str+="        </div>";
                        str+="        <div class=\'peopleInfor\'>";
                        str+="          <div class=\'peopleImg\'>";
                        str+="              <img src=\'"+newObj.img+"\'>";
                        str+="            </div>";
                        str+="            <div class=\'peopleTxt\'>";
                        str+="              <h2>"+newObj.workername+"</h2>";
                        str+="                <p>更新时间："+newObj.addtime+"</p>";
                        str+="            </div>";
                        str+="            <div class=\'teamNum\'>人数:"+newObj.count+"人</div>";
                        str+="            <a href=\'"+newObj.url+"\' class=\'telBtn\'></a>";
                        str+="        </div>";
                        str+="        <dl>";
                        str+="        </dl>";
                        str+="    </div> ";

                    var liDom=document.createElement("li");
                    liDom.innerHTML=str;

                    if (isAppend) {
                        listDom.appendChild(liDom);//加在列表的后面,上拉加载
                    } else{
                        listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
                    }
                }
            }

            /*联网加载列表数据
             在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
             请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
             实际项目以您服务器接口返回的数据为准,无需本地处理分页.
             * */
            // var downIndex=0;
            // function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
            //  //延时一秒,模拟联网
   //              setTimeout(function () {
   //               try{
   //                   var newArr=[];
      //                if(pageNum==0){
      //                    //此处模拟下拉刷新返回的数据
      //                    downIndex++;
      //                    var newObj={title:"【新增新闻"+downIndex+"】 新增新闻的标题", content:"新增新闻的内容"};
      //                    newArr.push(newObj);
      //                }else{
      //                    //此处模拟上拉加载返回的数据
      //                    for (var i = 0; i < pageSize; i++) {
      //                        var upIndex=(pageNum-1)*pageSize+i+1;
      //                        var newObj={title:"【新闻"+upIndex+"】 标题标题标题标题标题标题", content:"内容内容内容内容内容内容内容内容内容内容"};
      //                        newArr.push(newObj);
      //                    }
      //                }
      //                //联网成功的回调
      //                successCallback&&successCallback(newArr);
   //               }catch(e){
   //                   //联网失败的回调
   //                   errorCallback&&errorCallback();
   //               }
   //              },1000)
            // }

        });
    </script>
 <script>
 	$(window).scroll(function(){
		var height = $(window).height();
		var scrollSpace = $(window).scrollTop();
		if(scrollSpace>height){
			$('.backTop').fadeIn();
		}else{
			$('.backTop').fadeOut();
		}
	})
 	$('.contBtn').click(function(){
		if($(this).hasClass('on')){
			$(this).parent().siblings('.information').removeClass('cur');
			$(this).removeClass('on')
		}else{
			$(this).addClass('on')
			$(this).parent().siblings('.information').addClass('cur');
		}
	})
	$('.backTop').click(function(){
		$('body,html').animate({scrollTop:0},500);
	})
 </script>
</html>
